<template>
  <div class="signal" v-if="data">
    <mt-header fixed title="号源详情">
      <div @click="$router.back()" slot="left">
        <mt-button icon="back"></mt-button>
      </div>
    </mt-header>
    <!-- 医生信息介绍 -->
    <div
      class="doctor_info"
      v-for="{
        hname,
        hadd,
        kshi,
        did,
        dname,
        head,
        lv,
        price,
        strong,
      } in data.data"
      :key="did"
    >
      <div class="info_top">
        <div class="image"><img :src="head" alt="" /></div>
        <h3>{{ dname }}</h3>
        <span>{{ lv }}</span>
      </div>
      <div>就诊科室:{{ kshi }}</div>
      <div>出诊医院:{{ hname }}</div>
      <div>
        医事服务费 <span style="color: #f06253">￥{{ price }}</span>
        <p style="color: #508ec7; font-size: 12px">
          医事服务费均在就诊时由医院直接收取,本平台不收取任何费用。
        </p>
      </div>
      <div class="shanchang">擅长:{{ strong }}</div>
      <div style="position: relative">
        <h3 style="margin-top: 0; margin-bottom: 1vh">医院地址</h3>
        {{ hadd }}
        <button value="复制" class="copy">复制</button>
      </div>
    </div>
    <!-- 占位 -->
    <div class="zhanwei"></div>
    <!-- 信息填写 -->
    <div class="info_write">
      <h3>信息填写</h3>
      <mt-field
        label="就诊人"
        placeholder="填写就诊人姓名"
        v-model="name"
        @blur.native.capture="Mname"
      ></mt-field>
      <mt-field
        label="有效证件"
        placeholder="填写就诊人有效证件号"
        v-model="ID_number"
        @blur.native.capture="identitys"
      ></mt-field>
      <mt-field
        label="手机号"
        placeholder="填写就诊人手机号"
        type="tel"
        v-model="phone"
        @blur.native.capture="phones"
      ></mt-field>
      <mt-field
        @click.native="tanchu()"
        label="就诊时间"
        placeholder="请选择就诊时间"
        type="datetime"
        v-model="register_time"
      ></mt-field>

      <mt-popup modal="false" v-model="popupVisible" position="bottom">
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

        <div class="button_center">
          <mt-button @click="tanru()">取消</mt-button>
          <mt-button @click="select()">确认</mt-button>
        </div>
      </mt-popup>

      <mt-field
        label="疾病描述"
        placeholder="请描述就诊人的疾病/病症"
        type="textarea"
        rows="4"
        v-model="state"
        @blur.native.capture="names"
      ></mt-field>
      <div class="message">
        温馨提示：每个账户挂号和取消次数有上限，请按需预约
      </div>
      <button type="submit" id="submit" @click="postData" :disabled="disableds">
        确认提交
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "",
      hname: "",
      kshi: "",
      dname: "",
      data: "",
      day: "",
      name: "",
      ID_number: "",
      phone: "",
      register_time: "",
      state: "",
      popupVisible: false,
      disableds: false,
      date: [],
      slots: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center",
        },
      ],
    };
  },
  methods: {
    phones() {
      const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!phoneReg.test(this.phone.trim())) {
        this.$toast({
          message: "请输入有效的手机号",
          position: "center",
          duration: 1500,
        });
      } else {
        return true;
      }
    },
    identitys() {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!reg.test(this.ID_number.trim())) {
        this.$toast({
          message: "请输入有效身份证件",
          position: "center",
          duration: 1500,
        });
      } else {
        return true;
      }
    },
    Mname() {
      let gt = this.name.indexOf("<");
      let lt = this.name.indexOf(">");
      if (gt != -1 || lt != -1) {
        this.$toast({
          message: "请输入去掉特殊字符",
          position: "center",
          duration: 1500,
        });
      } else {
        return true;
      }
    },
    names() {
      let gt = this.state.indexOf("<");
      let lt = this.state.indexOf(">");
      if (gt != -1 || lt != -1) {
        this.$toast({
          message: "请输入去掉特殊字符",
          position: "center",
          duration: 1500,
        });
      } else {
        return true;
      }
    },
    postData() {
      if (this.names() && this.Mname() && this.phones() && this.identitys()) {
        let params = `yhid=${this.$store.state.phone}&name=${this.name}&ID_number=${this.ID_number}&phone=${this.phone}&department=${this.kshi}&dname=${this.dname}&price=${this.price}&state=${this.state}&register_time=${this.register_time}&hospital=${this.hname}&ysid=${this.$route.query.lid}`;
        this.axios.post("/users/registration", params).then((res) => {
          if (res.data.code == 200) {
            this.$router.go(-1);
            this.$toast({
                  message: "预约成功",
                  position: "center",
                  duration: 2000,
                });
          } else {
            this.$toast({
              message: "请重新输入",
              position: "center",
              duration: 1500,
            });
          }
        });
      }
    },
    getData() {
      this.axios
        .get(`/doctor_zili?did=${this.$route.query.lid}`)
        .then((res) => {
          this.data = res.data;
          this.dname = res.data.data[0].dname;
          this.price = res.data.data[0].price;
          this.hname = res.data.data[0].hname;
          this.kshi = res.data.data[0].kshi;
          this.axios
            .get(`doctor_state?sname=${res.data.data[0].dname}`)
            .then((res) => {
              if (!res.data.data) {
                this.$toast({
                  message: "抱歉没号了",
                  position: "center",
                  duration: 5000,
                });
                this.disableds = true;
              } else {
                this.disableds = false;
              }
              if (!res.data.data) return;
              res.data.data.forEach((item) => {
                this.date.push(item.stime + "上午");
                this.date.push(item.stime + "下午");
              });

              this.returnArray();
            });
        });
    },
    onValuesChange(picker, values) {
      this.day = values[0];
    },
    select() {
      this.tanru();
      return (this.register_time = this.day);
    },
    tanchu() {
      this.popupVisible = true;
    },
    tanru() {
      this.popupVisible = false;
    },
    returnArray() {
      return (this.slots[0].values = this.date);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.signal {
  &::before {
    content: "";
    display: block;
    height: 10vw;
  }
  .mint-header {
    padding: 1vh 3vw;
    background-color: #fff;
    color: #000;
    font-size: 20px;
  }

  .doctor_info {
    padding: 1vh 3vw;
    height: 46vh;
    font-size: 16px;
    margin-top: 3vh;
    display: flex;
    flex-direction: column;
    > div {
      margin: 1vh 0;
    }
    .info_top {
      line-height: 10vw;
      display: flex;
      .image {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      > h3 {
        margin: 0 5vw;
      }
    }
    .shanchang {
      border-bottom: 1px solid #eee;
      height: 10vh;
      padding-bottom: 2vh;
      font-size: 14px;
    }
    .copy {
      position: absolute;
      top: 0;
      right: 0;
      width: 16vw;
      height: 8vw;
      border-radius: 8vw;
      color: #fff;
      border: 0;
      background-color: #01dcb9;
    }
  }
  .zhanwei {
    width: 100%;
    height: 2vh;
    background-color: #f7f8fa;
  }
  .info_write {
    padding: 1vh 3vw;
    ::v-deep .mint-cell-wrapper {
      border: 1px solid #f7f8fa;
      background-color: #f7f8fa;
      margin: 1vw;
      .mint-cell-text {
        font-weight: 700;
      }
      .mint-field-core {
        background-color: #f7f8fa;
      }
    }
    .button_center {
      margin: 0;
      width: 100vw;
      text-align: center;
      .mint-button {
        width: 50vw;
        height: 5vh;
        color: #000;
      }
    }
    .message {
      padding: 2vh 0;
      font-size: 14px;
      color: #8b8b8b;
    }
    #submit {
      width: 50vw;
      height: 10vw;
      border-radius: 10vw;
      color: #fff;
      border: 0;
      margin: 5vh 20vw;
      background-color: #01dcb9;
    }
  }
}
</style>